"use client";

import styles from "./home.module.scss";
import {SideBar} from "../../components/sidebar/sidebar"
/*React Router 相关的组件，用于设置路由。*/
import {
    HashRouter as Router,
    Routes,
    Route,
} from "react-router-dom";
import {Path} from "@/app/constants";
import dynamic from "next/dynamic";
import {useAppConfig} from "../../store/config";
import {DialogMessage} from "@/app/components/dialog/dialog-message";
import {useLocation} from "react-router";
import {useAccessStore} from "@/app/store/access";
/*Next.js 中用于动态加载模块（组件等）的功能*/
const Chat = dynamic(async () => (await import("@/app/pages/chat/chat")).Chat);
const Role = dynamic(async () => (await import("@/app/pages/role/role")).Role);
const Tool = dynamic(async () => (await import("@/app/pages/tool/tool")).Tool);
const Auth = dynamic(async () => (await import("@/app/pages/auth/auth")).Auth);
// const User = dynamic(async () => (await import("@/app/pages/user/user")).User);
const Sale = dynamic(async () => (await import("@/app/pages/sale/sale")).Sale);

function Screen() {
    const config = useAppConfig();
    const access = useAccessStore();
    const location = useLocation();
    const isAuthPath = location.pathname === '/auth';
    const isAuthorized = access.isAuthorized()
    return (
        <div className={`${config.tightBorder ? styles["tight-container"] : styles.container}`}>
            {isAuthPath || !isAuthorized ? (<Auth/>) :

                (
                    <>
                        {/* 侧边栏 */}
                        <SideBar/>
                        {/* 路由地址 */}
                        <div className={styles["window-content"]}>
                            <Routes>
                                <Route path={Path.Home} element={<Chat/>}/>
                                <Route path={Path.Chat} element={<Chat/>}>
                                    {/* id 用于跳转子页面*/}
                                    <Route path=":id" element={<DialogMessage/>}/>
                                </Route>
                                <Route path={Path.Role} element={<Role/>}/>

                                <Route path={Path.Tool} element={<Tool/>}/>
                                <Route path={Path.Sale} element={<Sale/>}/>

{/* 这个User我仿写然后报错了 */}
                                {/* <Route path={Path.User} element={<User/>}/> */}
                            </Routes>

                        </div>
                    </>
                )
            }


        </div>

    );
}

export function Home() {
    return (
        <Router>
            <Screen/>
        </Router>
    );
}